import React, { Component } from "react";
import { withRouter} from 'react-router-dom'
import { formateDate } from '../../utils/dateUtils'

import menuList from '../../config/menuConfig'
import "./index.less";
import { Modal, Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import storageUtils from '../../utils/storageUtils'
import memoryUtils from '../../utils/memoryUtils'
import LinkButton from '../../components/link-button'
@withRouter
class header extends Component {
	state = {
		currentTime:formateDate(Date.now())
  }
  
  getTime = () => {
    this.intervalId =  setInterval( () => { 
      const currentTime = formateDate( Date.now() )
      this.setState( {currentTime})
    },1000)
  }
  componentDidMount () { 
    this.getTime()
  }
  getTitle = () => {
    const path = this.props.location.pathname
    // console.log(path);
    let title
    menuList.forEach( item => { 
      if ( item.key === path ) { 
      title=item.title
    } else if( item.children ){ 
     const cItem = item.children.find( cItem => cItem.key === path )
      if ( cItem ) {
        //取出它的title
        title=cItem.title
      }
    }
    } )
    return title
  }
  logout = () => { 
     Modal.confirm({
    title: '确定退出吗',
    icon: <ExclamationCircleOutlined />,
    // content: 'Bla bla ...',
    okText: '确认',
       cancelText: '取消',
       
       onOk :()=> { 
         console.log( 'ok' );
         storageUtils.removeUser()
         memoryUtils.user = {}
         this.props.history.replace('/login')
       }
  })
  }


  componentWillUnmount () { 
    clearInterval(this.intervalId)
  }
	render () {
		const { currentTime } = this.state
    const username = memoryUtils.user.username
    const title = this.getTitle()
    return (
      <div className="header">
				<div className="header-top">
				<span>欢迎，{ username}</span>
          {/* <a href="javascript:" onClick={ this.logout }>退出
           
          </a> */}
          <LinkButton onClick={ this.logout}>退出</LinkButton>
				</div>
				<div className="header-bottom">
          <div className="header-bottom-left">{ title}</div>
					<div className="header-bottom-right">
					<span>{ currentTime}</span>
						<span></span>
						<span>晴</span>
					</div>
				</div>
      </div>
    );
  }
}

export default header;
